<template>
  <div class="exam-detail-page">
    <div class="exam-page">
      <nav4 ref="nav4"></nav4>
      <div class="exam-page__content">
        <div id="highlightable-content" class="exam-container exam-bank">
          <div class="exam-bank-header">
            <div class="main h1">Part 1</div>
            <div class="sub f16">You should spend about 20 minutes on this task. Write at least 150 words.</div>
          </div>
          <div class="exam-bank-wrapper writing-wrap" :style="{height:height+'px'}">
            <div id="exam-article" class="writing-wrap__section left">
              <vue-scroll :ops="ops">
                <div>
                  <div style="">
                    <p>The chart below shows the results of a survey about people's coffee and tea buying and drinking
                      habits in five Australian cities.</p>

                    <p>Summarise the information by selecting and reporting the main features, and make comparisons
                      where
                      relevant.</p>

                    <p><img height="656" src="https://cdn.tiku.xdf.cn/1004/1591494774095436.png" width="805"></p>
                  </div>
                  <div style="display: none;">
                    <p><em>In some countries, owning a home rather than renting one is very important for people.</em>
                    </p>

                    <p><em>Why might this be the case?</em></p>

                    <p><em>Do you think this is a positive or negative situation?</em></p>

                    <p>Give reasons for your answer and include any relevant examples from your own knowledge or
                      experience.</p>
                  </div>
                </div>
              </vue-scroll>
            </div>
            <div id="exam-playground" class="writing-wrap__section right">
              <div class="writing-answer_area-wrap"><textarea class="input-area"></textarea>
                <p class="writing-answer-operate-wrap"><span class="counter">Word
                    count: 0</span></p>
              </div>
            </div>
          </div>
          <examfooter ref="examfooter" @changeIndex="changeIndex"></examfooter>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import nav4 from '../components/nav4.vue'
  import examfooter from '../components/examfooter.vue'
  import vueScroll from "vuescroll";
  export default {
    data() {
      return {
        itemIndex: 0,
        itemIndex2: 0,
        height: 0,
        ops: {
          vueScroll: {},
          scrollPanel: {},
          rail: {},
          bar: {
            size: '6px',
            background: '#999'
          }
        }
      }
    },
    components: {
      nav4,
      examfooter,
      vueScroll
    },
    methods: {
      changeIndex() {
        this.itemIndex = this.$refs.examfooter.itemIndex;
        this.itemIndex2 = this.$refs.examfooter.itemIndex2;
      }
    },
    mounted() {
      this.height = document.documentElement.clientHeight - 250;
      window.onresize = () => {
        this.height = document.documentElement.clientHeight - 250;
      };
      this.$refs.nav4.outTime(true);
    }
  }

</script>

<style lang="less" scoped>
  @import "./listenAnswer.less";
  @import "./writeAnswer.less";

</style>
